<template>
  <div class="content-box" v-loading="!dataLoaded">
    <div class="content">
      <div class="group">
        <div class="header">
          <div class="title">门禁组地图</div>
        </div>
        <div class="tree">
          <ZTree :id="treeId" :zNodes="zNodes" @click-dom="zTreeOnClick" />
        </div>
      </div>
      <div class="main">
        <div class="header">
          <div class="title">人员列表</div>
        </div>
        <div class="table-box" v-loading="loading">
          <ProTable
            ref="proTable"
            title="人员信息"
            rowKey="empid"
            :columns="columns"
            :request-api="getTableList"
            :data-callback="dataCallback"
            :tool-button="false"
            :search-col="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2 }"
            :small="true"
            v-if="columns.length"
          >
            <template #tableHeader="scope">
              <el-button type="primary" text :icon="CirclePlus" @click="openDialog">增加</el-button>
              <el-button type="danger" text :icon="Delete" @click="_batchDel(scope.selectedListIds)">删除</el-button>
            </template>
            <!-- Expand -->
            <template #expand="scope">
              {{ scope.row }}
            </template>
          </ProTable>
        </div>
      </div>
    </div>
    <EmployeeDialog
      :dialogVisible="dialogVisible"
      :handleClose="handleClose"
      :empcardTypes="empcardTypes"
      :submitCallback="_submitRuleGroup"
      :rgId="rgId"
    />
  </div>
</template>

<script setup lang="tsx" name="ruleGroup">
/* eslint-disable */
// @ts-nocheck
import { onMounted, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import ZTree from "@/components/ZTree/index.vue";
import EmployeeDialog from "./components/EmployeeDialog.vue";
import { CirclePlus, Delete } from "@element-plus/icons-vue";
import { getEmployeeList, delGroup, addGroup, getEmpcardTypes } from "@/api/modules/accessControl/empower/ruleGroup";
import { getGroupTree } from "@/api/modules/common";
import { ElMessage, ElMessageBox } from "element-plus";

const treeId = ref("tree");
const dialogVisible = ref(false);
const dataLoaded = ref(false);
const loading = ref(false);
const proTable = ref();
const rgId: any = ref([]);
const columns: any = ref([]);
const curEmployee: any = ref({});
const zNodes: any = ref([]);
const empcardTypes = ref([]);

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records || [],
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getEmployeeList({
    ...newParams,
    exists: true,
    rgId: rgId.value
  });
};

const _batchDel = async (selectedListIds: string[]) => {
  if (!selectedListIds.length) {
    ElMessage.error("请选择人员");
    return false;
  }
  ElMessageBox.confirm(`是否删除所选人员?`, "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  }).then(async () => {
    try {
      const res = await delGroup({ empIds: selectedListIds, rgIds: [rgId.value] });
      const { v1, v2 } = res.data;
      ElMessage.success(`删除成功：${v1},失败：${v2}`);

      proTable.value.clearSelection();
      proTable.value.getTableList();
    } catch (error) {
      console.log(error);
    }
  });
};

const _submitRuleGroup = async (empIds: string[]) => {
  try {
    const res = await addGroup({
      empIds,
      rgIds: [rgId.value]
    });
    const { v1, v2 } = res.data;
    dialogVisible.value = false;
    ElMessage.success(`增加成功：${v1},失败：${v2}`);
    proTable.value.clearSelection();
    proTable.value.reset();
  } catch (error) {
    console.log(error);
  }
};

/**
 * 增加房间弹窗
 */
const openDialog = () => {
  dialogVisible.value = true;
};

/**
 * 关闭弹窗
 */
const handleClose = () => {
  dialogVisible.value = false;
};

/**
 * 获取酒店选择下拉列表
 */
const getEmpcardTypeData = async () => {
  try {
    const res = await getEmpcardTypes();
    empcardTypes.value = res.data.map(item => {
      return {
        label: item.value,
        value: item.value
      };
    });
    columns.value = [
      { type: "selection", fixed: "left", width: 60 },
      {
        prop: "cardType",
        label: "类型",
        isShow: false,
        enum: empcardTypes.value,
        search: {
          el: "select"
        },
        width: 120
      },
      {
        prop: "clause",
        label: "姓名",
        isShow: false,
        search: { el: "input" }
      },
      {
        prop: "empid",
        label: "编码",
        minWidth: 120
      },
      {
        prop: "empname",
        label: "姓名",
        minWidth: 120
      },
      {
        prop: "dptName",
        label: "部门",
        minWidth: 200
      },
      {
        prop: "cardvalid",
        label: "有效期",
        minWidth: 200
      }
    ];
  } catch (error) {
    columns.value = [
      { type: "selection", fixed: "left", width: 60 },

      {
        prop: "empcode",
        label: "编码",
        minWidth: 120
      },
      {
        prop: "empname",
        label: "姓名",
        search: { el: "input" },
        minWidth: 120
      },
      {
        prop: "dptName",
        label: "部门",
        minWidth: 200
      },
      {
        prop: "cardvalid",
        label: "有效期",
        minWidth: 200
      }
    ];
    console.log(error);
  }
};
const getGroupTreeData = async () => {
  try {
    const res = await getGroupTree({
      rgFlag: 0
    });
    zNodes.value = res.data;
    if (zNodes.value.length) {
      rgId.value = zNodes.value[0].id;
    }
  } catch (error) {
    console.log(error);
  }
};

/**
 * 展开树
 */
const getFlatMapData = (list: any) => {
  let newList = JSON.parse(JSON.stringify(list));
  return newList.flatMap((item: any) => [item, ...(item.children ? getFlatMapData(item.children) : [])]);
};

/**
 * 点击树节点
 */
function zTreeOnClick({ treeNode }) {
  rgId.value = treeNode.id;
  loading.value = true;
  if (proTable.value) {
    proTable.value.clearSelection();
    proTable.value.reset();
  }
}

onMounted(async () => {
  Promise.all([getGroupTreeData()]).then(() => {
    dataLoaded.value = true;
    getEmpcardTypeData();
  });
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
